

@keyframes title-show {
    0% {
        opacity:0.35;
    }
    100% {
        opacity: 1;
    }
}

.title-container{
    width:100%;
    height:10rem;
    position:fixed;
    top:9rem;
    left:3rem;
    font-size:6rem;
    line-height:10rem;
    text-align:center;
    -webkit-animation-name: 'title-show';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1.5s;/*动画持续时间*/
    -webkit-animation-timing-function: ease-in; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s;/*动画延迟时间*/
    -webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: alternate;/*定义动画方式*/
}

.enter-btn{
    position:fixed;
    top:50%;
    left:48%;
    background-color:red;
    background-image:linear-gradient(to right, #BD4498,#5648B4);
    z-index:999;
    border-radius:50%;
    text-align:center;
    -webkit-animation-name: 'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1.5s;/*动画持续时间*/
    -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0.5s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: alternate;/*定义动画方式*/
}

@keyframes ripple {
    0% {
    /*opacity:0.35;*/
    font-size:.8rem;
    width:4rem;
    height:4rem;
    margin-top:1rem;
    margin-left:0.5rem;
    }
    100% {
    /*opacity: 0.2;*/
    font-size:1rem;
    width:5rem;
    height:5rem;
    margin-top:0;
    margin-left:0rem;
    }
}

@keyframes word-ripple {
    0% {
    /*opacity:0.35;*/
    font-size:.8rem;
    width:4rem;
    height:4rem;
    margin-top:1.1rem;
    margin-left:0.5rem;
    }
    100% {
    /*opacity: 0.2;*/
    font-size:1rem;
    width:5rem;
    height:5rem;
    margin-top:.4rem;
    margin-left:0rem;
    }
}


.btn-word{
    position:fixed;
    top:53%;
    left:48%;
    margin-top:1rem;
    z-index:99999;
    text-align:center;
    background:transparent;
    font-family:Arial;
    font-weight:bold;
    color:white;
    -webkit-animation-name: 'word-ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1.5s;/*动画持续时间*/
    -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0.5s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: alternate;/*定义动画方式*/
}